import React from 'react';
import './ReGrossMargin.css'
import {Select, Table, DatePicker, Radio, Row, Col, Tooltip } from 'antd';
import axios from 'axios'
import {QuestionCircleOutlined} from '@ant-design/icons';

let  reEchart = require('echarts');
const { RangePicker } = DatePicker;
const text = <ul style={{
    listStyle:'none',
    margin:'0',
    padding:'0',
    fontSize:'12px'}}><li>1、订货单/退货单提交订单后即计入统计；</li>
    <li>2、作废的订/退货单不计入统计；</li>
    <li>3、运费不计入统计。</li>
    <li>4、环比周期算法：快捷选择时间标签，则本周的环比周期为上周，本月环比周期为上月；自定义选择时间段，则其环比周期为往前推、与之相邻的相同长度的时间段。</li>
</ul>;
const title = {
    color: '#96a6b6',
    fontSize: '13px',
    transition: 'all .5s',
};
const purchase = {
    cursor: 'pointer',
    height: '100%'
};
const contrast = {
    color: '#7b8aa1',
    marginTop: '25px'
};
const title2 = {
    backgroundColor:'#f8f9fd',
    textAlign:'center',
    height: '110px',
    borderTop:'1px solid #eee',
    borderBottom: '1px solid #f1f2f7',
    borderLeft: '1px solid #eee',
    borderRight: '1px solid #eee'
};
const num = {
    color: '#415161',
    fontSize: '22px'
};
const content = {
    paddindTop: '30px',
    borderLeft: '1px solid #ebebeb',
    borderRight: '1px solid #ebebeb'
};
const lastnum = {
    color: '#7b8aa1',
    position: 'absolute',
    right: '0'
};
const { Option } = Select;
const dataSource1 = [

];
const dataSource2 = [

];
const columns1 = [
    {
        title: '部门名称',
        dataIndex: 'apartname',
        key: 'apartname',
    },
    {
        title: '毛利统计排行',
        dataIndex: 'avg',
        key: 'avg',
    },
];
const columns2 = [
    {
        title: '部门名称',
        dataIndex: 'apartname',
        key: 'apartname',
    },
    {
        title: '毛利',
        dataIndex: 'avg',
        key: 'avg',
    },
    {
        title: '毛利额贡献度排行',
        dataIndex: 'avg',
        key: 'avg',
    }
];
function handleChange(value) {
    console.log(`selected ${value}`);
}

class ReGrossMargin extends React.Component {
    constructor(){
        super();
        this.state={

        };

    }
    render() {

        return (
            <div>
                <Row style={{marginBottom:'8px'}}>
                    <Col span={6}>
                        <Radio.Group defaultValue="a" buttonStyle="solid" className={'rg'}>
                            <Radio.Button value="a">本周</Radio.Button>
                            <Radio.Button value="b">上周</Radio.Button>
                            <Radio.Button value="c">本月</Radio.Button>
                            <Radio.Button value="d">上月</Radio.Button>
                        </Radio.Group>
                    </Col>
                    <Col span={6}>
                        <RangePicker/>
                    </Col>
                    <Col span={6}>
                    </Col>
                    <Col span={6}>
                        <div style={{textAlign:"right"}}>
                            <Tooltip placement="bottomRight" title={text}>
                                <span style={{marginRight:'5px',cursor:'pointer'}} id={'icon'}>统计说明</span>
                                <QuestionCircleOutlined className={'icon1'}/>
                                <QuestionCircleOutlined className={'icon2'}/>
                            </Tooltip>
                        </div>
                    </Col>
                </Row>
                <div className={'body'}>
                    <Row style={title2}>
                        <Col span={8} style={{width:'25%'}}>
                            <div style={contrast}>
                                <span style={num}>0</span>
                            </div>
                            <div style={title}>销售收入</div>
                        </Col>
                        <Col span={8} style={title2}>
                            <div style={contrast}>
                                <span style={num}>0</span>
                            </div>
                            <div style={title}>销售成本</div>
                        </Col>
                        <Col span={8} style={title2}>
                            <div style={contrast}>
                                <span style={num}>0(-)</span>
                            </div>
                            <div style={title}>毛利</div>
                        </Col>
                    </Row>
                    <div style={content}>
                        <div style={{margin:'25px 0'}}>
                            <Row>
                                <Col span={6}>
                                    <Select defaultValue="1" style={{ width:'185px',margin:'0 7% 0 8%'}} onChange={handleChange}>
                                        <Option value="1">按部门毛利统计/按部门统计</Option>
                                    </Select>
                                </Col>
                                <Col span={6}>

                                </Col>
                                <Col span={6}>

                                </Col>
                                <Col span={6}>
                                </Col>
                            </Row>
                            <div style={{width:'100%'}} id='ReOrderBox'/>
                        </div>
                        <Row>
                            <Col span={12}>
                                <Table dataSource={dataSource1} columns={columns1} />;
                            </Col>
                            <Col span={12}>
                                <Table dataSource={dataSource2} columns={columns2} />;
                            </Col>
                        </Row>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
        );
    }
}

export default ReGrossMargin;